<!doctype html>
<html lang="ko">
  <head>
    <script>
      (function (i, s, o, g, r, a, m) {
        i["GoogleAnalyticsObject"] = r;
        ((i[r] =
          i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          }),
          (i[r].l = 1 * new Date()));
        ((a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]));
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
      })(
        window,
        document,
        "script",
        "//www.google-analytics.com/analytics.js",
        "ga",
      );
      ga("create", "UA-61231638-1", "auto");
      ga("send", "pageview");
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Layout 문서.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>
  <body onload="prettyPrint();">
    <!-- NAVBAR
================================================== -->
    <body>
      <div class="navbar-wrapper">
        <div class="container">
          <nav class="navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
              <div class="navbar-header">
                <button
                  type="button"
                  class="navbar-toggle collapsed"
                  data-toggle="collapse"
                  data-target="#navbar"
                  aria-expanded="false"
                  aria-controls="navbar"
                >
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
                <form class="navbar-form navbar-right" role="search">
                  <input
                    name="q"
                    id="tipue_search_input"
                    autocomplete="off"
                    type="text"
                    class="form-control"
                    placeholder="Keyword 입력"
                  />
                  <button
                    type="button"
                    class="btn btn-default"
                    onclick="vis.initSiteSearch(true);"
                  >
                    검색
                  </button>
                </form>
                <div id="search-results-wrapper" class="panel panel-default">
                  <div class="panel-body">
                    <div id="tipue_search_content"></div>
                  </div>
                </div>
                <div id="keyword-info" class="panel panel-success">
                  <div class="panel-body">
                    Found <span id="keyword-count"></span> results. Click
                    <a id="keyword-jumper-button" href="">here</a> to jump to
                    the first keyword occurence!
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="container full">
        <h1>Network - layout</h1>
        <p>
          canvas 위에서 보는 카메라 역할을 합니다. 애니메이션 확대/축소 및
          포커싱을 수행합니다.
        </p>
        <h3>옵션</h3>
        <p>
          layout 모듈의 옵션은 'layout'이라는 제목의 object에 포함되어야 합니다.
        </p>
        <p>전체 옵션 혹은 요약 옵션을 클릭하여 사용하는 방법을 표시합니다.</p>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active" onclick="toggleTab(this)">
            <a href="#">옵션 숨기기</a>
          </li>
          <li
            role="presentation"
            onclick="toggleTab(this);"
            targetNode="fullOptions"
          >
            <a href="#">전체 옵션</a>
          </li>
          <li
            role="presentation"
            onclick="toggleTab(this);"
            targetNode="shortOptions"
          >
            <a href="#">요약 옵션</a>
          </li>
        </ul>
        <br />
        <pre class="prettyprint lang-js options top hidden" id="fullOptions">
// 모든 옵션들 입니다.
var options = {
  layout: {
    randomSeed: undefined,
    improvedLayout:true,
    clusterThreshold: 150,
    hierarchical: {
      enabled:false,
      levelSeparation: 150,
      nodeSpacing: 100,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',        // UD, DU, LR, RL
      sortMethod: 'hubsize',  // hubsize, directed
      shakeTowards: 'leaves'  // roots, leaves
    }
  }
}

network.setOptions(options);
</pre
        >

        <pre class="prettyprint lang-js options top hidden" id="shortOptions">
// 단축 옵션만 표시합니다.
var options = {
  layout:{
    hierarchical: true
  }
}

network.setOptions(options);
</pre
        >
        <p>
          hierarchical layout을 사용하도록 설정한다면, 다른 옵션 중 일부를
          재정의합니다. physics는 hierarchical repulsion solver로 설정되고 동적
          곡선 Edge는 정적 곡선 Edge로 변환됩니다.
        </p>
        <table class="options" id="optionTable">
          <tr>
            <th>이름</th>
            <th>Type</th>
            <th>Default</th>
            <td>설명</td>
          </tr>
          <tr>
            <td>randomSeed</td>
            <td>Number or String</td>
            <td><code>undefined</code></td>
            <td>
              hierarchical layout을 사용하지 않는 경우, Node들은 처음에 랜덤하게
              배치됩니다. 매번 결과가 다르다는 의미입니다. 랜덤 시드를 수동으로
              제공하는 경우 layout이 매번 동일합니다. 정의되지 않은 시드로
              시도하고 layout이 마음에 들면 <code>getSeed()</code>를 이용해
              시드를 확인하는 것이 좋습니다.
            </td>
          </tr>
          <tr id="layout">
            <td>improvedLayout</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              활성화가 되면 Network는 초기 layout에 Kamada Kawai 알고리즘을
              사용합니다. Node가 100개 이상인 Network의 경우 Node를 줄이기 위해
              클러스터링이 자동으로 수행됩니다. (리프 Node가 적거나 없음),
              이것이 작동하지 않을 수 있으며 이전 메소드로 돌아갑니다. 이는
              개선될 것입니다.
            </td>
          </tr>
          <tr>
            <td>clusterThreshold</td>
            <td>Number</td>
            <td><code>150</code></td>
            <td>
              <code>improvedLayout</code>이 적용되는 클러스터 임계값입니다.
            </td>
          </tr>
          <tr
            class="toggle collapsible"
            onclick="toggleTable('optionTable','hierarchical', this);"
          >
            <td>
              <span parent="repulsion" class="right-caret"></span> hierarchical
            </td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>
              True이면, layout 엔진은 기본 설정을 사용하여 Node를 hierarchical
              방식으로 배치합니다. 사용자 설정을 위해 object를 제공할 수
              있습니다.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.enabled</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>
              hierarchical layout 시스템의 사용을 전환합니다. 이 옵션이 정의되지
              않은 경우 이 object의 속성 중 하나가 true로 정의됩니다.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.levelSeparation</td>
            <td>Number</td>
            <td><code>150</code></td>
            <td>서로 다른 레벨 사이의 거리입니다.</td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.nodeSpacing</td>
            <td>Number</td>
            <td><code>100</code></td>
            <td>
              자유 축의 Node간의 최소 거리입니다. 이것은 처음 layout에만
              해당됩니다. physics를 활성화하면 해당 Node 거리가 유효 Node 거리로
              변경됩니다.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.treeSpacing</td>
            <td>Number</td>
            <td><code>200</code></td>
            <td>
              서로 다른 트리 사이의 거리 (독립된 Network들) 입니다. 이것은 처음
              layout에만 해당됩니다. physics를 활성화하면, repulsion 모델은 트리
              사이의 거리를 나타냅니다.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.blockShifting</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              공백을 줄이는 방법입니다. 단독으로 사용하거나, Edge 최소화와 함께
              사용할 수 있습니다. 각 Node는 공백을 확인하고 모든 레벨의 Node
              spacing에 따라 가능한 한 부분을 이동시킵니다. 이는 주로 첫
              layout을 위한 것입니다. physics를 활성화하면 physics에 의해
              layout이 결정됩니다. 하지만 이것은 안정화 시간을 크게 단축할
              것입니다!
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.edgeMinimization</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              공백을 줄이는 방법입니다. 단독으로 사용하거나 block shifting과
              함께 사용할 수 있습니다. block shifting을 활성화하면 일반적으로
              layout 프로세스의 속도가 빨라집니다. 각 Node는 각 Edge의 총 길이를
              줄이기 위해 자유 축을 따라 이동하려고 시도합니다. 이것은 주로 첫
              layout을 위한 것입니다. physics를 활성화하면 physics에 의해
              layout이 결정됩니다. 하지만 이것은 안정화 시간을 크게 단축시킬
              것입니다!
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.parentCentralization</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              True이면 layout 알고리즘 완료된 후 상위 Node의 중심이 다시
              맞춰집니다.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.direction</td>
            <td>String</td>
            <td><code>'UD'</code></td>
            <td>
              hierarchical layout의 방향입니다. 사용 가능한 옵션은
              <code>UD, DU, LR, RL</code>입니다. 이 단어들의 요약입니다.
              up-down, down-up, left-right, right-left.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.sortMethod</td>
            <td>String</td>
            <td><code>'hubsize'</code></td>
            <td>
              데이터를 기반으로 Node의 레벨을 확인하는 데 사용하는
              알고리즘입니다. 가능한 옵션: <code>hubsize, directed</code>.
              <br /><br />
              Hubsize는 가장 많은 Edge를 가진 Node를 최상단에 배치합니다. 이를
              통해 나머지 층이 계산됩니다. <br /><br />
              Edge 데이터로 연결됩니다. A->B 그래서 B는 A보다 낮은 레벨입니다.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.shakeTowards</td>
            <td>String</td>
            <td><code>'roots'</code></td>
            <td>
              layout에서 모든 루트가 가능한 상위 및 하위 Node에 정렬되어야
              하는지(<code>roots</code>) <code>directed</code> 또는 모든 leaf가
              하단에 정렬되어 있고 부모(<code>leaves</code>, default)가 가능한
              자식에게 근접해야 하는지 여부를 제어합니다.
            </td>
          </tr>
        </table>

        <div class="flagbar">
          <a href="../../docs/network/layout.html" title="English"
            ><span class="flag en"></span
          ></a>
          <a href="../../docs-kr/network/layout.html" title="Korean"
            ><span class="flag kr"></span
          ></a>

          <br />

          Third party docs:
          <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
            ><span class="flag zh"></span
          ></a>
        </div>
      </div>

      <!-- Bootstrap core JavaScript
================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
      <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
      <!-- jquery extensions -->
      <script src="../../common-docs-files/js/jquery.highlight.js"></script>
      <script src="../../common-docs-files/js/jquery.url.min.js"></script>
      <!-- Tipue vendor js -->
      <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
      <!-- controller -->
      <script src="../../common-docs-files/js/main.js"></script>
    </body>
  </body>
</html>
